/*
 * @Description: 距离信息列表
 * @Author: yingying.fan
 * @Date: 2019-05-22 15:37:24
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-23 16:16:02
 */
<template>
  <div class="flex-h flex-hc flex-vc distance-wrapper">

    <!-- 有距离数据时展示 -->
    <template v-if="distanceList&&distanceList.length>0">
      <template v-for="(item, index) in distanceList">
        <!-- 分割线 -->
        <div
          class="distance-divide-line"
          :key="`line${index}`"
          v-if="index!==0"
        ></div>
        <!-- 距离信息 -->
        <distance
          :key="`distance${index}`"
          :distanceInfo="item"
          class="flex1"
        >
        </distance>
      </template>
    </template>
    <!-- 无距离数据时展示 -->
    <div v-else>
      <img
        v-if="stateInfo.img"
        class="distance-error-img"
        :src="stateInfo.img"
      >
      <p class="fontsize24">{{stateInfo.desc}}</p>
    </div>
  </div>
</template>

<script>
import RouteInfoModel from '../model/RouteInfoModel.js'
import DistanceItem from './DistanceItem'
export default {
  components: {
    'distance': DistanceItem
  },
  props: {
    routeInfo: {
      type: RouteInfoModel,
      default: null
    },
    distanceList: {
      type: Array,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      noDataIcon: require('../assets/distance-state-no.png'),
      stopIcon: require('../assets/distance-state-stop.png'),
      waitIcon: require('../assets/distance-state-wait.png')
    }
  },
  computed: {
    stateInfo() {
      let img
      let desc
      // 判断状态展示文字，为了确保首末班时间就算返回较迟也能正常展示
      if (this.distanceList && this.distanceList.length === 0 && this.routeInfo.startTime && this.routeInfo.endTime) {
        try {
          let nowDateTime = new Date()
          // let nowDateTime = new Date(2019, 4, 23, 6)
          let firstDateTime = this.getFinalDate(nowDateTime, this.routeInfo.startTime)
          let lastTDateime = this.getFinalDate(nowDateTime, this.routeInfo.endTime)
          if (nowDateTime >= firstDateTime && nowDateTime <= lastTDateime) {
            // 当前时间在首末班时间内无数据则展示‘等待发车’
            img = this.waitIcon
            desc = '等待发车'
            // '暂无数据'
          } else {
            // 否则提示‘不在运营时间’
            img = this.stopIcon
            desc = '不在运营时间'
          }
        } catch (error) {
          console.error('~~~时间判断', error)
        }
      }
      return { img, desc }
    }
  },
  mounted() {
  },
  methods: {
    // 时间转换返回Date
    getFinalDate(nowDate, changeTime) {
      changeTime = changeTime.replace(/[\u4e00-\u9fa5]/g, '').split(':')
      if (changeTime.length < 2) {
        changeTime[1] = '0'
      }
      if (changeTime.length < 3) {
        changeTime[2] = '0'
      }
      let resultDate = new Date(
        nowDate.getFullYear(),
        nowDate.getMonth(),
        nowDate.getDate(),
        changeTime[0],
        changeTime[1],
        changeTime[2]
      )
      return resultDate
    }
  }
}
</script>

<style scoped>
/* 距离信息 */
.distance-wrapper {
  width: 690px;
  height: 180px;
  background-color: #ffffff;
  margin: 0 30px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 5px 50px rgba(212, 212, 212, 0.5);
  color: #666666;
  line-height: 1.2;
}
.distance-divide-line {
  width: 1px; /*no*/
  height: 108px;
  background-color: #eeeeee;
}
.distance-error-img {
  width: 82px;
  height: 82px;
  margin-bottom: 13px;
}
</style>
